<template>
    <div>
        <q-breadcrumbs class="q-pa-md">
            <q-breadcrumbs-el label="Home" icon="home" to="/"/>  
            
            <q-breadcrumbs-el label="Noval" icon="widgets"/>
        </q-breadcrumbs>
        <div class="row">
            <div class="col-md-5 q-pa-md">
                <q-table title="list" :data="tableData" :columns="columns" row-key="name" 
                rows-per-page-option='[5,10]'
                :loading='loading' :pagination.sync="serverPagination"  @request="getList"
                >
                    <template slot="top-left" slot-scope="props">
                        <q-search hide-underline color="secondary" v-model="filter" class="col-6"  @input="search()" />
                    </template>

                    <template slot="top-right" slot-scope="props">
                        <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" 
                        @click="props.toggleFullscreen"/>
                        
                    </template>
                    <!-- <q-btn flat round dense icon="fa fa-plus" 
                        @click="props.toggleFullscreen"/> -->

                    <q-tr slot="body" slot-scope="props" :props="props" @click.native="rowClick(props.row)" class="cursor-pointer">
                        <q-td v-for="col in props.cols" :key="col.name" :props="props">
                            {{ col.value }}
                        </q-td>
                    </q-tr>

                </q-table>
            </div>
            <div class="col-md-7 q-pa-md">
                <q-card > 
                    <q-card-title>
                        <span>edit</span>
                        <div class="float-right">
                            <!-- <q-btn color="negative" flat round icon="fa fa-bug" @click="$router.push('/')"/> -->
                            <q-btn color="negative" flat round icon="fa fa-plus" @click="add()"/>
                            <q-btn color="negative" flat round icon="fa fa-magic" @click="autoConfig()" v-if="info.urlFixed"/>

                            <q-btn color="negative" flat round icon="fa fa-bug" @click="debug()" v-if="info.name"/>
                            
                            <q-btn color="negative" flat round icon="fa bookmark" @click="save()" v-if="info.name"/>
                            <q-btn color="negative" flat round icon="fa fa-retweet" @click="crawler()" v-if="info.id"/>
                            <q-btn color="negative" flat round icon="fa fa-download" @click="download()" v-if="info.id"/>
                        </div>
                        
                    </q-card-title>
                    <q-card-separator />
                    <q-card-main >
                        
                        <div class="row">
                            <div class="col-md-12 q-pb-md">
                                <q-input  v-model="info.name" stack-label="名称" />
                            </div>

                            <div class="col-md-6 q-pb-md">
                                <q-input  v-model="info.urlFixed" stack-label="网络地址前缀：" />
                            </div>
                            <div class="col-md-6 q-pb-md q-pl-md">
                                <q-input  v-model="info.urlCur" stack-label=" " />
                            </div>

                            <div class="col-md-6 q-pb-md">
                                <q-input v-model="info.titleSelector" stack-label="标题选择器：" />
                            </div>
                            <div class="col-md-6 q-pb-md q-pl-md">
                                <q-input v-model="info.titleClean" stack-label="标题清除文本：" />
                            </div>

                            <div class="col-md-6 q-pb-md">
                                <q-input v-model="info.contentSelector" stack-label="内容选择器：" />
                            </div>
                            <div class="col-md-6 q-pb-md q-pl-md">
                                <q-input v-model="info.contentClean" stack-label="内容清除文本：" />
                            </div>
                            <div class="col-md-6 q-pb-md">
                                <q-input v-model="info.nextSelector" stack-label="下一页选择器" />
                            </div>
                            <div class="col-md-6 q-pb-md q-pl-md">
                                <q-input v-model="info.nextEnd" stack-label="下一页结束标记：" />
                            </div>
                            <div class="col-md-6 q-pb-md">
                                <q-input v-model="info.preSelector" stack-label="上一页选择器：" />
                            </div>
                            <div class="col-md-6 q-pb-md q-pl-md">
                                <q-input v-model="info.preEnd" stack-label="上一页结束标记：" />
                            </div>
                        </div>

                    </q-card-main>
                </q-card>
            </div>
            


        </div>
        <div class="row" >
            <div class="col-12 q-pa-md">
                <q-card v-if="info.title || info.content"> 
                    <q-card-title>
                        <div class="row">
                            {{chapterList.length?'':info.title}}
                            <q-select class="col-6" v-model="info.urlCur" filter v-if="chapterList.length" 
                            :options="chapterList" @input='checkedChapter'/>
                            <q-btn class="float-right" color="negative" flat round icon="fa fa-step-backward" @click="prePage()" v-if="info.name"/>
                            <q-btn class="float-right" color="negative" flat round icon="fa fa fa-step-forward" @click="nextPage()" v-if="info.name"/>
                        </div>
                    </q-card-title>
                    <q-card-separator />
                    <q-card-main v-html="info.content" >

                    </q-card-main>
                </q-card>
            </div>

        </div>

        
    </div>
</template>

<script>
import $ from "jquery";
export default {
    name:'noval-list',
    data(){
        return{
            loading:false,
            serverPagination:{
                page: 1,
                rowsNumber: 10
            },
            filter:'',
            columns: [
                // { name: 'id',required: true,label: 'id',align: 'left',field: 'id',sortable: true},
                { name: 'name',required: true,label: 'name',align: 'left',field: 'name',sortable: true},
                { name: 'title',required: true,label: 'title',align: 'left',field: 'title',sortable: true}
            ],
            tableData: [],

            info:{}, //
            chapterList:[], //
            text:""
            
        }
    },
    mounted(){
        this.init();
    },
    methods:{

        alert(){
             this.$alert.warning("warn")
             this.$alert.success("success")
        },
        init(){
            this.search()
        },
        search(){
            this.getList({
                pagination: this.serverPagination
            }) 
            
        },
        getList({pagination, filter}){
            console.info(pagination);
            this.loading = true
            
            var that = this

            let reqParams ={
                page:pagination.page,
                size:pagination.rowsPerPage,
                keyword:this.filter
            }
            
            this.$axios.post('/novel/queryNovelList',reqParams)
            .then(function (response) {
                console.info(response)
                that.serverPagination = pagination
                that.serverPagination.rowsNumber = parseInt(response.data.result.count);
                that.tableData = response.data.result.rows;
                that.loading = false;
            })
            .catch(function (error) {
                that.loading = false;
            })
                 
        },
        
        
        rowClick(row){
            // console.info(row)
            this.info = row

            delete this.info.__index
            this.getChapters();
        },
        add(){
            this.info = {};
        },
        autoConfig(){
            let that = this;
            that.$q.loading.show()
            this.$axios.post('/novel/queryAutoNovelConfig',{url_fixed:this.info.urlFixed})
            .then(function (response) {
                that.$q.loading.hide()
                if(response.data.code=='0000'){
                    let obj ={};
                    $.extend(obj,that.info,response.data.result) ;
                    that.info = obj;
                }else{
                    this.$alert.warning(response.data.msg)
                }
                
            })
            .catch(function (error) {
                that.$q.loading.hide()
            })

        },
        debug(){
            let that = this;
            that.$q.loading.show()
            this.$axios.post('/novel/debug',this.info)
            .then(function (response) {
                that.$q.loading.hide()
                if(response.data.code=='0000'){
                    that.info = response.data.result;
                }else{
                    this.$alert.warning(response.data.msg)
                }
                
            })
            .catch(function (error) {
                that.$q.loading.hide()
            })
        },
        save(){
            let that = this;
            that.$q.loading.show()
            this.$axios.post('/novel/save',this.info)
            .then(function (response) {
                that.$q.loading.hide()
                if(response.data.code == '0000'){
                    that.info = response.data.result;
                }else{
                    this.$alert.warning(response.data.msg)
                }
                
            })
            .catch(function (error) {
                that.$q.loading.hide()
            })
        },
        crawler(){
            if(!this.info.id){
                return
            }

            this.$axios.post('/novel/crawler',this.info)
            .then(function (response) {
            
            })
            .catch(function (error) {

            })
        },    
        download(){
            var url = global.url_root + '/novel/download';
            var form=document.createElement("form");
            form.style = "display:none";
            form.target = "";
            form.method = "post";
            form.action = url;
            document.body.appendChild(form);

            var info = this.info;
            for(var key in info){
                if(info[key]){
                    var input=document.createElement("input");
                    input.setAttribute("type","hidden");
                    input.setAttribute("name",key);
                    input.setAttribute("id",key);
                    input.setAttribute("value",info[key]);
                    form.appendChild(input);
                }
            }

            form.submit();//表单提交
        
        },    
        getChapters(){

            let that = this;

            let chapterParams = {
                index:0,
                size:5000,
                novelid:this.info.id
            }
            that.$q.loading.show()
            this.$axios.post('/novel/queryChapters',chapterParams)
            .then(function (response) {
                that.$q.loading.hide()
                if(response.data.code =='0000'){
                    if(response.data.result && response.data.result.rows && response.data.result.rows.length){

                        let chapters = response.data.result.rows

                        that.chapterList=[];

                        for(let i=0;i<chapters.length;i++){
                            if(!chapters[i]) return
                            var item = {}
                            item.label = chapters[i].title;
                            item.value = chapters[i].url_cur;
                            that.chapterList.push(item) 
                        }


                    }

                }else{
                    this.$alert.warning(response.data.msg)
                }

                
            })
            .catch(function (error) {
                that.$q.loading.hide()
            })

        },
        checkedChapter(newVal){
            // console.info(newVal)
            // this.info.urlCur = chapter.url_cur
            this.debug()
        },
        prePage(){
            
            let that = this;
            that.$q.loading.show()
            that.$axios.post('/novel/prePage',this.info)
            .then(function (response) {
                that.$q.loading.hide()
                if(response.data.code=='0000'){
                    that.info = response.data.result;
                }else{
                    that.$alert.warning(response.data.msg)
                }
                
            })
            .catch(function (error) {
                that.$q.loading.hide()
            })
        },
        nextPage(){
            let that = this;
            that.$q.loading.show()
            that.$axios.post('/novel/nextPage',this.info)
            .then(function (response) {
                that.$q.loading.hide()
                if(response.data.code=='0000'){
                    that.info = response.data.result;
                }else{
                    that.$alert.warning(response.data.msg)
                }
            })
            .catch(function (error) {
                that.$q.loading.hide()
            })

        },







    }
}
</script>

<style>

</style>
